/** @jsxImportSource @emotion/react */
import * as React from "react";
import {CCell, Cell, Table, TableBody, TableRow, Text,} from "customize-easy-ui-component";
import {DirectLink,} from "../../../routing/Link";
import {RepLink,} from "../../common/base";
import {usePrefixDataTable} from "../../hook/usePrefixData";
import {useThreeColumnView} from "../../hook/useThreeColumnSubr";
import {render设备品种, render设备类别} from "../../common/render";
import {仪器简表Amus} from "../views";
import {检验设备结论Observ} from "../viewRes";

//仅正式报告
const config设备 = [
  [['使用单位名称', '_$使用单位'],  ],
  [['使用单位地址', '_$使用单位地址'],  ],
  [['分支机构名称', '_$分支机构'] ],
  [['分支机构地址', '_$分支机构地址'] ],
  [['使用地点', '_$设备使用地点']],
  [['安全管理人员', '安全员'], ['联系电话', '安全员电'] ],
  [['设备代码', '_$设备代码'], ['注册代码', '_$注册代码']],
  [['使用登记证编号', '_$使用证号'], ['单位内部编号','_$单位内部编号'], ],
  [['制造单位名称', '_$制造单位'] ],
  [['改造单位名称','_$改造单位']],
  [['大修单位名称','_$维修单位']],
  [['设备类别', '_$设备类别',render设备类别], ['设备品种', '_$设备品种',render设备品种], ],
  [['设备型号', '_$型号'], ['设备名称', '_$设备名称'], ],
  [['产品编号', '_$出厂编号'],  ['制造日期', '_$制造日期'] ],
  [['设备级别', '_$设备等级'], ['使用年限到期时间','_$使用到期时' ], ],
  //性能参数;  拆分
  [['额定载荷','_$额定载人','人'], ['额定速度', '_$额定速度','m/min']  ],
  [['车场面积', '_$车场面积','㎡'], ['车辆总数', '_$车船数量','辆'], ],
  // [['回转直径', '_$回转直径','m'],  [' ',{r:' '}] ],
];
//拆分成2个编辑器的
const config设备上=config设备.slice(0, 15);
const config设备下=config设备.slice(15);

export const 报告设备详情= ( {theme, orc, rep } : { orc: any,rep:any, theme:any}
) => {
  const renderUpper=usePrefixDataTable({config: config设备上, orc, rep, slash:true});
  const [firstPart,_s]=useThreeColumnView({orc, config:config设备下,slash:true,
                            embedCol: [ <CCell rowSpan={2}>性能参数</CCell> ]});
  return <React.Fragment>
    <Table id={'Survey'} fixed={ ["6.1%","8%","40%","8.1%","8%","%"] }  css={ {borderCollapse: 'collapse' } }  tight  miniw={800}>
      <TableBody>
        <RepLink rep={rep} tag={'Survey'}>
          {renderUpper}
        </RepLink>
      </TableBody>
    </Table>
    <Table fixed={ ["4.8%","12.7%","24%","9%","12.2%","10%","%"] }  css={ {borderCollapse: 'collapse' } }  tight  miniw={800}>
      <TableBody>
        <RepLink rep={rep} tag={'Survey'}>
          {firstPart}
        </RepLink>
        <TableRow>
          <CCell colSpan={1}>检验依据</CCell>
          <CCell colSpan={6}>《游乐设施监督检验规程（试行）》（国质检锅[2002]124号）</CCell>
        </TableRow>
      <TableRow>
        <CCell split >主要检验仪器设备</CCell>
        <CCell split colSpan={6} css={{padding: 0}}>
          {仪器简表Amus({ orc, rep, })}
        </CCell>
      </TableRow>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/Conclusion#Conclusion`}>
          <TableRow>
            <CCell>检验结论</CCell><CCell colSpan={6}><Text variant="h1" css={{fontSize:'2.8rem',letterSpacing: '1rem'}}>{orc?.检验结论}</Text></CCell>
          </TableRow>
        </DirectLink>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/Witness#Witness`}>
          <TableRow>
            <CCell>备注</CCell>
            <Cell split={true} colSpan={6}><div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
              {orc.大备注 ?? '／'}
            </div></Cell>
          </TableRow>
        </DirectLink>
      </TableBody>
    </Table>
    {检验设备结论Observ({theme, orc,rep,label3:'批准'})}
  </React.Fragment>;
};
